import React, { useMemo } from 'react';
import { ThemeProvider as StyledComponentThemeProvider } from 'styled-components';

import { useTheme } from '../state/user/hooks';

const theme = (themeMode: string) => {
    return {
        primary: themeMode === 'Dark' ? '#000000' : '#ffffff'
    }
}


const ThemeProvider = ({ children }:{ children:React.ReactNode }) => {
    const themeMode = useTheme()
    const themeObject = useMemo(() => theme(themeMode), [themeMode])
    return <StyledComponentThemeProvider theme={themeObject}>{children}</StyledComponentThemeProvider>
}


export default ThemeProvider
